<template>
  <div class="app-container calendar-list-container">
    <basic-container>
      <avue-crud ref="crud"
                 :option="tableOption"
                 :data="list"
                 :page.sync="page"
                 v-model="form"
                 :table-loading="listLoading"
                 :before-open="handleOpenBefore"
                 @on-load="getList"
                 @search-change="searchChange"
                 @refresh-change="refreshChange"
                 @size-change="sizeChange"
                 @current-change="currentChange"
                 @row-update="update"
                 @row-save="create">

        <template slot="menuLeft">
          <el-button v-if="permissions.role_add"
                     class="filter-item"
                     type="primary"
                     icon="el-icon-plus"
                     @click="handleCreate">添加
          </el-button>
        </template>

        <template slot="clientId"
                  slot-scope="scope">
          <el-tag :type="scope.label === 'PC端' ? 'success' : 'warning'">{{ scope.label }}</el-tag>
        </template>

        <template slot="menu"
                  slot-scope="scope">
          <el-button v-if="permissions.role_edit"
                     type="text"
                     size="small"
                     icon="el-icon-edit"
                     @click="handleUpdate(scope.row,scope.index)">编辑
          </el-button>
          <el-button v-if="permissions.role_del"
                     type="text"
                     size="small"
                     icon="el-icon-delete"
                     @click="handleDelete(scope.row,scope.index)">删除
          </el-button>
          <el-button v-if="permissions.role_perm"
                     type="text"
                     size="small"
                     icon="el-icon-plus"
                     @click="handlePermission(scope.row,scope.index)">权限
          </el-button>
        </template>
      </avue-crud>
    </basic-container>
    <el-dialog :visible.sync="dialogPermissionVisible"
               :close-on-click-modal="false"
               title="分配权限">
      <div class="dialog-main-tree">
        <el-tree ref="menuTree"
                 :data="treeData"
                 :default-checked-keys="checkedKeys"
                 :check-strictly="true"
                 :props="defaultProps"
                 :filter-node-method="filterNode"
                 class="filter-tree"
                 node-key="id"
                 highlight-current
                 show-checkbox
                 default-expand-all />
      </div>
      <div slot="footer"
           class="dialog-footer">
        <el-button type="primary"
                   size="small"
                   @click="updatePermession()">更 新
        </el-button>
        <el-button type="default"
                   size="small"
                   @click="cancal()">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addObj, delObj, fetchList, fetchRoleTree, permissionUpd, putObj } from '@/api/admin/role'
import { tableOption } from '@/const/crud/admin/role'
import { fetchMenuTree } from '@/api/admin/menu'
import { mapGetters } from 'vuex'

export default {
  name: 'TableRole',
  data () {
    return {
      searchForm: {
        clientId: 'pcSide'
      },
      tableOption: tableOption,
      treeData: [],
      checkedKeys: [],
      defaultProps: {
        label: 'name',
        value: 'id'
      },
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条
      },
      list: [],
      listLoading: true,
      form: {},
      roleId: undefined,
      rolesOptions: undefined,
      dialogPermissionVisible: false,
    }
  },
  created () {
  },
  computed: {
    ...mapGetters(['elements', 'permissions'])
  },
  methods: {
    getList (page, params) {
      this.listLoading = true
      fetchList(Object.assign({
        current: page.currentPage,
        size: page.pageSize
      }, params, this.searchForm)).then(response => {
        this.list = response.data.data.records
        this.page.total = response.data.data.total
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    },
    refreshChange () {
      this.getList(this.page)
    },
    searchChange (form, done) {
      this.searchForm = form
      this.page.currentPage = 1
      this.getList(this.page, form)
      done()
    },
    sizeChange (pageSize) {
      this.page.pageSize = pageSize
    },
    currentChange (current) {
      this.page.currentPage = current
    },
    handleCreate () {
      this.$refs.crud.rowAdd()
    },
    handleOpenBefore (show) {
      show()
    },
    handleUpdate (row, index) {
      this.$refs.crud.rowEdit(row, index)
    },
    cancal () {
      this.dialogPermissionVisible = false;
    },
    handlePermission (row) {
      this.roleId = row.roleId
      let _fetchRoleTree = false
      let _fetchMenuTree = false
      fetchRoleTree(row.roleId).then(response => {
        this.checkedKeys = response.data.data || []
        _fetchRoleTree = true
        this.dialogPermissionVisible = _fetchRoleTree && _fetchMenuTree
      })
      fetchMenuTree(row.clientId).then(response => {
        this.treeData = response.data.data || []
        _fetchMenuTree = true
        this.dialogPermissionVisible = _fetchRoleTree && _fetchMenuTree
      })
    },
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    getNodeData (data, done) {
      done()
    },
    handleDelete (row, index) {
      this.$confirm('是否确认删除名称为"' + row.roleName + '"' + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return delObj(row.roleId)
      }).then((resp) => {
        this.getList(this.page)
        this.$notify.success(resp.data.message)
      }).catch(() => { })
    },
    create (row, done, loading) {
      addObj(this.form).then((resp) => {
        this.getList(this.page)
        done()
        this.$notify.success(resp.data.message)
      }).catch(() => {
        loading()
      })
    },
    update (row, index, done, loading) {
      putObj(this.form).then((resp) => {
        this.getList(this.page)
        done()
        this.$notify.success(resp.data.message)
      }).catch(() => {
        loading()
      })
    },
    updatePermession () {
      if (!this.roleId) return
      permissionUpd(this.roleId, this.$refs.menuTree.getCheckedKeys() || []).then((resp) => {
        this.dialogPermissionVisible = false
        this.$notify.success(resp.data.message)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-dialog__wrapper {
  .el-dialog {
    width: 61% !important;
    .dialog-main-tree {
      max-height: 400px;
      overflow-y: auto;
    }
  }
  .el-form-item__label {
    width: 20% !important;
    padding-right: 20px;
  }
  .el-form-item__content {
    margin-left: 20% !important;
  }
}
</style>
